<template>
  <div class="control-bar">
      <div class="control-bar-item" 
      v-for="(item, index) in titles" :key="index"
      :class="{active: index == currentIndex}"
      @click='itemClick(index)'>
        <span>{{ item }}</span>
      </div>
  </div>
</template>

<script>
  export default {
    name: "ControlBar",
    props: {
        titles: ''
    },
    data() {
        return {
            currentIndex: 0
        }
    },
    methods: {
        itemClick(index) {
            this.currentIndex = index
            this.$emit('barClick', index)
        }
    }
  }
</script>

<style scoped>
.control-bar {
    display: flex;
    position: sticky;
    top: 44px;
    background-color: #fff;
    z-index: 8;
}

.control-bar-item {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.active {
    color: var(--color-high-text);
}

.active span {   
    border-bottom: 3px solid var(--color-high-text);
}

span {
    font-size: 15px;
    padding: 5px;
}

</style>
